<template>
  <view class="edit-enterprise-info">
    <nav-bar left-text="编辑商家退换信息" />
    <bg-set background="#f2f3f7" />
    <view class="edit-enterprise-info__main">
      <view class="edit f fd-col">
        <view class="header mb40"
          ><text class="fw-600">请编辑商家退换信息</text></view
        >
        <view class="body f ai-c">
          <uni-forms :modelValue="formData" :rules="rules" ref="form">
            <uni-forms-item label="商家姓名" name="name" :required="true">
              <uni-easyinput
                type="text"
                v-model="formData.name"
                :inputBorder="false"
                placeholder="请输入商家姓名"
              />
            </uni-forms-item>
            <uni-forms-item label="商家手机号码" name="phone" :required="true">
              <uni-easyinput
                type="text"
                v-model="formData.phone"
                :inputBorder="false"
                placeholder="请输入商家手机号码"
              />
            </uni-forms-item>
            <uni-forms-item label="商家地址" name="address" :required="true">
              <uni-easyinput
                type="text"
                v-model="formData.address"
                :inputBorder="false"
                placeholder="请输入商家地址"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
      </view>
    </view>
    <view class="edit-enterprise-info__footer f fd-col jc-c ai-c">
      <van-button
        :disabled="disabled"
        type="primary"
        @click="confirmEdit"
        round
        style="width: 80%"
        >确认编辑</van-button
      >
    </view>
  </view>
</template>

<script>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "edit-enterprise-info",
  setup() {
    const store = useStore();
    const rules = {
      // 对name字段进行必填验证
      name: {
        rules: [
          {
            required: true,
            errorMessage: "商家姓名不能为空!",
          },
        ],
      },
      phone: {
        rules: [
          {
            required: true,
            errorMessage: "商家手机号码不能为空!",
          },
          {
            validateFunction: (rule, value, data, callback) => {
              // 异步需要返回 Promise 对象
              return new Promise((resolve, reject) => {
                const reg = /^1[3|4|5|7|8]\d{9}$/;
                setTimeout(() => {
                  if (reg.test(value)) {
                    // 通过返回 resolve
                    resolve();
                  } else {
                    // 不通过返回 reject(new Error('错误信息'))
                    reject(new Error("商家手机号码格式错误!"));
                  }
                }, 0);
              });
            },
          },
        ],
      },
      address: {
        rules: [
          {
            required: true,
            errorMessage: "商家地址不能为空!",
          },
        ],
      },
    };
    const form = ref(null);
    const selectObj_goodsReject = computed(
      () => store.getters.getSelectObj_goodsReject
    );
    const formData = reactive({
      name: selectObj_goodsReject.value.subUserName || "",
      phone: selectObj_goodsReject.value.subUserPhone || "",
      address: selectObj_goodsReject.value.subUserAddress || "",
    });
    const disabled = computed(
      () =>
        formData.name === "" || formData.phone === "" || formData.address === ""
    );
    const confirmEdit = () => {
      form.value
        .validate()
        .then((res) => {
          store.commit("setSelectObj_goodsReject", {
            subUserName: formData.name,
            subUserPhone: formData.phone,
            subUserAddress: formData.address,
          });
          uni.switchTab({
            url: "/pages/mail/mail",
          });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    };
    return { rules, form, disabled, formData, confirmEdit };
  },
};
</script>
<style lang='scss' scoped>
.edit-enterprise-info {
  position: fixed;
  width: 100%;
  height: 100vh;
  &__main {
    width: 100%;
    height: calc(100vh - 44rpx);
    box-shadow: 0 2rpx 4rpx #bbb;
    .edit {
      padding: 40rpx;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: #fff;
      ::v-deep .uni-easyinput__content {
        border-bottom: 1px solid #999;
        .uni-input-placeholder {
          font-size: 30rpx;
        }
      }
      ::v-deep .uni-forms{
        flex:1;
      }
      ::v-deep .uni-forms-item__label {
        width: 210rpx!important;
        .label-text {
          font-size: 30rpx;
        }
      }
      ::v-deep .uni-error-message{
        padding-left: 210rpx!important;
      }
    }
  }
  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px #eee;
  }
}
</style>